<template>
  <div class="field-column-wrap">
    <div class="drag">
      <div v-for="({label},index) in values"
           :key="label + index"
           :class="itemClasses(index)"
           :title="label"
           :style="columnStyle"
           class="drag__item"
           draggable
           @click="dragHandel(index)"
           @dragstart="onDragStart($event,index)"
           @dragover="onDragOver($event,index)"
           @dragend="onDropEnd">{{label}}
        <span v-show="showChecked(index)"
              class="iconClass">
          <img src="@/static/images/xuanzhong.png">
        </span>
        <div v-show="showMask(index)"
             class="mask">
        </div>
      </div>
    </div>
  </div>
</template>

<script>

const throttle = (fn, delay) => {
  let time = () => new Date().getTime()
  let old = time()
  return (...rest) => {
    if ((time() - old) > delay) {
      fn(...rest)
      old = time()
    }
  }
}
export default {
  name: 'ExportFieldColumn',
  props: {
    values: {
      type: Array,
      default: () => []
    },
    column: {
      type: Number,
      default: 7
    },
    types: {
      type: String,
      default: 'basis'
    },
    currentTabIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      height: 35
    }
  },
  computed: {
    columnWidth () {
      return 0.9 / this.column * 100 + '%'
    },
    columnStyle () {
      return {
        width: this.columnWidth,
        height: this.height + 'px'
      }
    },
    itemClasses () {
      return (index) => {
        const { types, currentTabIndex } = this;
        const { checked, defaultChecked, locked, fixed } = this.values[index];
        return {
          'active': types === 'add' || types === 'edit' || currentTabIndex !== 0 ? checked : defaultChecked,
          'activeBorder': types === 'add' || types === 'edit' ? locked : fixed
        };
      };
    },
    showChecked () {
      return (index) => {
        const { types, currentTabIndex } = this;
        const { checked, defaultChecked } = this.values[index];
        return types === 'add' || types === 'edit' || currentTabIndex !== 0 ? checked : defaultChecked;
      };
    },
    showMask () {
      return (index) => {
        const { types } = this;
        const { locked, fixed } = this.values[index];
        return types === 'add' || types === 'edit' ? locked : fixed;
      };
    }
  },
   created () {
    this.init()
  },
  methods: {
    init () {
      let fn = (start, target) => {
        if (start > target) {
          // 如果移动项在目标项后面，那么从目标项到移动项都向后移动一步
          this.values.splice(target, 0, ...this.values.splice(start, 1))
        }
        if (start < target) {
          // 如果移动项在目标项前面，那么从移动项到目标项都向前移动一步
          this.values.splice(start, 0, ...this.values.splice(start + 1, target - start))
        }
        // 更新上一次的位置
        this.oldIndex = target
        // 更新起始位置
        this.startIndex = target
      }
      this.exchange = throttle(fn, 100)
    },
    dragHandel (index) {
      this.values[index].checked = this.values[index].checked ? false : true;
    },
    onDropEnd (event) {
      event.target.style.opacity = ''
    },
    onDragOver (event, index) {
      event.preventDefault()
      this.exchange(this.startIndex, index)
    },
    onDragStart (event, index) {
      event.target.style.opacity = .5
      event.dataTransfer.dropEffect = "move";
      this.startIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.drag {
  display: flex;
  flex-wrap: wrap;
  // padding-left: 20px;
  &__item {
    margin: 5px;
    line-height: 35px;
    text-align: center;
    color: var(--prev-color-text-ashes);
    // background: var(--prev-bg-white);
    border: 1px solid var(--prev-border-color-grey);
    opacity: 1;
    border-radius: 3px;
    // cursor: pointer;
    position: relative;
    font-size: 14px;
    font-weight: 400 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // pointer-events: none !important; /* 禁止点击 */
  }
  .iconClass {
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0;
    bottom: 0;
    img {
      width: 22px;
      height: 22px;
    }
  }
}
.mask::before {
  content: ""; /* 必须要有 content 属性才能生效 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.39);
  // border: 1px solid #f4b194;
  // border-radius: 3px;
  z-index: 1; /* 确保遮罩层在内容之上 */
}

.activeBorder {
  border: 1px solid #f4b194 !important;
  cursor: no-drop !important;
  pointer-events: none !important; /* 禁止点击 */
}

.active {
  // background-color: rgba(255, 101, 0, 0.7);
  transition: transform 0.3s;
  // color: var(--prev-bg-white);
  border: 1px solid var(--prev-color-primary);
}
</style>